import { Scene, Color } from 'three';
import { gui } from '../system/gui.js';
//Canvas画布和div、p元素一样都是HTML元素，区别在于Canvas画布支持2D或3D绘图功能，threejs渲染的三维效果图就是呈现在Canvas画布上面。
//可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。
//Threejs三维场景Scene里面的物体，默认通过三维直角坐标系(三维笛卡尔坐标系)去定位。
//Three.js默认坐标系一个右手坐标系 (opens new window)，假设y默认轴向上，当x轴水平向右时候，此时z轴垂直屏幕向外。
//three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。
function createScene() {
  const scene = new Scene();

  scene.background = new Color(0x000000);
  scene.background.setRGB(0.01, 0.005, 0.05)
  scene.backgroundBlurriness = 0.5

  // debug
  gui.addColor(scene, 'background')

  return scene;
}

export { createScene };